<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="table-head">
        <el-input
          v-model="searchText"
          style="width: 240px"
          placeholder="请输入员工姓名"
          prefix-icon="el-icon-search"
          @input="handleInput"
          @keyup.enter.native="debounceSearch"
        />
        <el-button type="warning" size="small" @click="addEmployee"
          >添加员工
        </el-button>
      </div>
      <div class="table-body">
        <div class="inner-table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="员工姓名" align="center" />
            <el-table-column prop="username" label="账号" align="center" />
            <el-table-column prop="phone" label="手机号" align="center" />
            <el-table-column prop="status" label="账号状态" align="center">
              <template #default="scope1">
                {{ scope1.row.status === 0 ? diable : enable }}
              </template>
            </el-table-column>
            <el-table-column prop="id" label="操作" align="center">
              <template #default="scope">
                <el-button
                  type="text"
                  size="default"
                  @click="editListMsg(scope.row)"
                >
                  编辑
                </el-button>
                <el-divider direction="vertical" />
                <el-popconfirm
                  title="确认调整该账号的状态?"
                  @onConfirm="handleChange(scope.row)"
                >
                  <el-button
                    slot="reference"
                    size="default"
                    type="text"
                    style="color: red"
                  >
                    {{ scope.row.status === 1 ? disableText : enableText }}
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="table-foot">
        <pagination
          :total="totalPage"
          :current-page="pageInfo.page"
          :page-size="pageInfo.pageSize"
          @current-change="employeePageChange"
          @size-change="employeeSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import PageSelect from '@/components/pageSelect'
import { getEmployeePage, enableOrDisableEmployee } from "@/api/employeeManage";
import { debounce } from "lodash";
import Pagination from "@/components/Pagination";
export default {
  name: "EmployeeManage",
  components: {
    // Tables
    // PageSelect
    Pagination,
  },
  data() {
    return {
      tableData: [],
      // 获取表格数据
      pageInfo: {
        page: 1,
        pageSize: 10,
      },
      // 搜索内容(员工姓名)
      searchText: "",
      // 总页码(初始页码10)
      totalPage: 0,
      // 禁用/启用弹窗
      enableText: "启用",
      disableText: "禁用",
      // 账号状态
      diable: "已禁用",
      enable: "正常",
    };
  },

  created() {
    // 获取当前页面表格数据
    this.getEmpPage();
  },
  methods: {
    handleInput() {
      this.debounceSearch();
    },
    debounceSearch: debounce(function () {
      this.getEmpPage();
    }, 800),
    // 获取当前页面表格数据
    getEmpPage() {
      getEmployeePage({ ...this.pageInfo, name: this.searchText }).then(
        (res) => {
          // 当前页面数据总数
          this.totalPage = res.data.total;
          // 当前页面表格数据
          this.tableData = res.data.records;
        }
      );
    },
    // 新增员工
    addEmployee() {
      this.$router.push({ name: "addEmployee", query: { isEdit: "0" } });
    },
    // 修改员工信息
    editListMsg(msg) {
      this.$router.push({
        name: "updateEmployee",
        query: { id: msg.id, isEdit: "1" },
      });
    },
    async handleChange(row) {
      await enableOrDisableEmployee({
        id: row.id,
        status: +!row.status,
      });
      this.$message.success("修改成功");
      this.getEmpPage();
    },
    employeePageChange(val) {
      this.pageInfo.page = val;
      this.getEmpPage();
    },
    employeeSizeChange(val) {
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = val;
      this.getEmpPage();
    },
  },
};
</script>

<style lang="scss" scoped>
.table-head {
  display: flex;
  justify-content: space-between;
}
</style>
